<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="css/Login/Login.css">
</head>

<body>


    <div id="shell" class="shell">
        <div class="container a-container" id="a-container">
            <form class="form layui-form" id="a-form" lay-filter="a-form">
                <h2 class="form_title title">创建账号</h2>
                <input type="text" class="form_input layui-input" name="username" placeholder="Name" v-model="username"
                lay-verify="required" required />
                <input type="text" class="form_input" name="email" id="SignEmail" placeholder="Email" v-model="email"
                lay-verify="email" required/>
                <input v-if="email" type="text" class="form_input" name="cap" id="Cap" placeholder="Cap" v-model="cap"
                    v-bind:class="style" lay-verify="required" required/><button type="button" v-if="email" class="layui-btn layui-btn-radius"
                    style="background-color: #4B70E2;font-weight: 700;font-size: 14px;letter-spacing: 1.15px;box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;"
                    v-on:click="sendCode">
                    {{ buttonText }}
                </button>
                <input type="password" class="form_input" name="password" placeholder="Password" v-model="password"
                    lay-verify="required|pass" required/>
                <input type="hidden" name="servercap" v-model="servercap" lay-verify="servercap" required>
                <button type="submit" class="form_button button submit" lay-submit lay-filter="signup">
                    SIGN UP
                </button>
            </form>
        </div>

        <div class="container b-container" id="b-container">
            <form class="form layui-form" id="b-form" lay-filter="b-form">
                <h2 class="form_title title">登入账号</h2>
                <input type="text" class="form_input" name="username" placeholder="Name" lay-verify="required" required/>
                <input type="password" class="form_input" name="password" placeholder="Password" lay-verify="pass" required/>
                <a class="form_link">忘记密码？</a>
                <button type="submit" class="form_button button submit" lay-submit lay-filter="signin">
                    SIGN IN
                </button>
            </form>
        </div>

        <div class="switch" id="switch-cnt">
            <div class="switch_circle"></div>
            <div class="switch_circle switch_circle-t"></div>
            <div class="switch_container" id="switch-c1">
                <h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back！</h2>
                <p class="switch_description description">
                    已经有账号了嘛，去登入账号来进入奇妙世界吧！！！
                </p>
                <button class="switch_button button switch-btn" v-on:click="changeForm">
                    SIGN IN
                </button>
            </div>

            <div class="switch_container is-hidden" id="switch-c2">
                <h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
                <p class="switch_description description">
                    去注册一个账号，成为尊贵的粉丝会员，让我们踏入奇妙的旅途！
                </p>
                <button class="switch_button button switch-btn" v-on:click="changeForm">
                    SIGN UP
                </button>
            </div>
        </div>
    </div>
    <script>
        var vw = new Vue({
            el: '#shell',
            data() {
                return {
                    username: "",
                    email: "",
                    cap: "",
                    password: "",
                    servercap: "",
                    // 定义一个倒计时的初始值
                    countdown: 0,
                    // 定义一个按钮的文本
                    buttonText: "获取验证码",
                    // 定义一个发送状态的标志
                    isSending: false,
                };
            },
            computed: {
                style() {
                    return {
                        "is-valid": this.cap.length >= 6,
                        "is-invalid": this.cap.length < 6 && this.cap.length > 0,
                    };
                },
            },
            methods: {
                changeForm(e) {
                    // 修改类名
                    let switchCtn = document.querySelector("#switch-cnt");
                    let switchC1 = document.querySelector("#switch-c1");
                    let switchC2 = document.querySelector("#switch-c2");
                    let switchCircle = document.querySelectorAll(".switch_circle");
                    let aContainer = document.querySelector("#a-container");
                    let bContainer = document.querySelector("#b-container");
                    switchCtn.classList.add("is-gx");
                    setTimeout(function () {
                        switchCtn.classList.remove("is-gx");
                    }, 1500);
                    switchCtn.classList.toggle("is-txr");
                    switchCircle[0].classList.toggle("is-txr");
                    switchCircle[1].classList.toggle("is-txr");

                    switchC1.classList.toggle("is-hidden");
                    switchC2.classList.toggle("is-hidden");
                    aContainer.classList.toggle("is-txl");
                    bContainer.classList.toggle("is-txl");
                    bContainer.classList.toggle("is-z");
                },
                sendCode(e) {
                    e.preventDefault();
                    let vm = this;
                    $.ajax({
                        url: 'http://169.254.202.137:8080/GetCap?',
                        data: 'email=' + this.email,
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            vm.servercap = res.data;
                        }
                    })
                    // 检查是否正在倒计时或发送中，如果是则不执行发送逻辑
                    if (this.countdown > 0 || this.isSending) {
                        return;
                    }
                    // 设置发送状态为 true
                    this.isSending = true;
                    // 设置按钮文本为发送中
                    this.buttonText = "发送中...";
                    // 这里可以写你的发送验证码的逻辑，比如调用后端接口
                    // 模拟发送成功后的回调
                    setTimeout(() => {
                        // 设置发送状态为 false
                        this.isSending = false;
                        // 启动倒计时
                        this.startCountdown();
                    }, 1000);
                },
                startCountdown() {
                    // 设置倒计时的初始值
                    this.countdown = 60;
                    // 设置按钮文本为倒计时
                    this.buttonText = `${this.countdown}秒后重发`;
                    // 使用 setInterval 来每隔一秒更新倒计时的值
                    let timer = setInterval(() => {
                        // 如果倒计时为 0，则清除计时器，恢复按钮文本
                        if (this.countdown === 0) {
                            clearInterval(timer);
                            this.buttonText = "获取验证码";
                        } else {
                            // 否则，倒计时减一，更新按钮文本
                            this.countdown--;
                            this.buttonText = `${this.countdown}秒后重发`;
                        }
                    }, 1000);
                },
            },
        });
    </script>
    <script src="js/Login/Login.js"></script>
</body>

</html>